<template>
    <div class="selectContainer">
      <div class="selectPeo">


        <template v-for="(item,index) in approSelList">
            <div  class="peoCon" @click="removeAppro(index)">     
                <span class="titleIcon">{{item.name.substr(-2)}}</span> 
                <span>{{item.name.substr(-3)}}</span>
            </div>
        </template>
 
        <div class="peoCon add" @click="selectApproPeo">
            <span class="titleIcon add"></span>
            <span></span>
        </div>

      </div>
      
    </div>
</template>
<script>

import approveShow from "@/components/leave/approvePeoShow";
export default {
  data(){
      return{    
      }
  },
  computed:{

  },
  props:['approSelList'],
  watch:{

  },
  components:{
  },
  mounted:function(){
    // this.getShenheData();

  },
  methods:{
    getShenheData(){
        let params = {
          name:'',
          sourceType:'A'
        }

        this.Axios
            .Post(this.URL.leaveApprovalBylist.url,params)
            .then((res)=>{
            this.shenpi = res.data.datas
            })
    },
    selectApproPeo:function(){
        this.$emit('add');
    },
    removeAppro:function(index){
        // var result
        
        var result = JSON.parse(JSON.stringify(this.approSelList));
        result.splice(index,1)
        this.$emit('update:approSelList',result)
        // this.approSelList.splice(index,1);
        // console.log(this.approSelList);
    },

  }
}
</script>
<style lang="less" scoped>
.selectContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    // margin-bottom:0.3rem;
    div.selectPeo {
      width: 100%;
      min-height: 1rem;
      line-height:0.7rem;
      padding-left:0.3rem;
      div:not(.hr){
        display:inline-block;
        width:1rem;
        margin:0 0.04rem;
        text-align:center;
        vertical-align: top;
      }
      div.hr{
        display:inline-block;
        text-align:center;
        p{
           height:0.32rem;
        }
      }
      .titleIcon{
            font-size:0.32rem;
            display:inline-block;
            width:1rem;
            height:1rem;
            line-height:1rem;
            text-align:center;
            font-weight:500;
            color:#fff;
            background-color:#007DE4;
            border-radius:50%;
            vertical-align: top;
      }
      div.add{
        vertical-align: top;
      }
      span.add{
        font-size:0.8rem;
        vertical-align: top;
        position:relative;
        // background-color:#fff;
        // border:1px solid #888;
      }
      span.add:before{
        content:'+';
        
        color:#fff;
        width:0.96rem;
        height:0.96rem;
        font-size:0.8rem;
        line-height:0.96rem;
        vertical-align: top;
        display: inline-block;
      }
      span.disable{
        background:rgba(0,0,0,0.3);
        font-size:#fff;
      }
      i {
        font-size: 0.32rem;
        color: #a2a2a2;
        margin-top: 0.32rem;
        vertical-align: top;
        display: inline-block;
      }
    }

}

</style>
<style>
.selectContainer .selectItem{
  line-height:1rem;
}
</style>


             
             
             
             
